<template>
    <view style="width: 100vw;height: 100vh;overflow: hidden;background: #1E2238;color: white;" class="flex_row">
        <view class="flex_col_between" style="flex:1;background-color:#4A5079;padding-top: 60px;">
            <view class="flex_column">
                <image src="../../image/dbbtn/back.png" @click="back" style="width: 8vh;height: 8vh;margin-left: 10vh;"></image>
                <view v-if="!finish"
                    style="background: #1E2238;border-radius: 10px 0px 0px 10px;margin: 4vh 0 0 10vh;"
                    class="flex_column">
                    <view
                        style="height: 10px;background-color:#4A5079;border-radius: 0px 0px 10px 0px;flex-shrink: 0;">
                    </view>
                    <view class="outbtn">
                        <view class="btn allCenter">
                            <view class="inbtn border_r5 rem04 allCenter fw500" style="margin:5px;">待检列表</view>
                        </view>
                    </view>
                    <view
                        style="height: 10px;background-color:#4A5079;border-radius: 0px 10px 0px 0px;flex-shrink: 0;">
                    </view>
                </view>
                <view class="flex_column" v-if="finish" @click="finish=false">
                    <view style="height: 27px;"></view>
                    <view style="height: 1.2rem;" class="allCenter rem04 fw500">待检列表</view>
                </view>
                <view style="height: 0.2rem;"></view>
                <view v-if="finish"
                    style="background: #1E2238;border-radius: 10px 0px 0px 10px;margin: 4vh 0 0 10vh;"
                    class="flex_column"> 
                    <view
                        style="height: 10px;background-color:#4A5079;border-radius: 0px 0px 10px 0px;flex-shrink: 0;">
                    </view>
                    <view class="outbtn">
                        <view class="btn allCenter">
                            <view class="inbtn border_r5 rem04 allCenter fw500" style="margin:5px;">已检列表</view>
                        </view>
                    </view>
                    <view
                        style="height: 10px;background-color:#4A5079;border-radius: 0px 10px 0px 0px;flex-shrink: 0;">
                    </view>
                </view>
                <view class="flex_column" v-if="!finish" @click="finish=true">
                    <view style="height: 15px;"></view>
                    <view style="height: 1.2rem;" class="allCenter rem04 fw500">已检列表</view>
                    <view style="height: 20px;"></view>
                </view>
            </view>
            <view style="height: 5vh;"></view>
            <!-- <view class="allCenter fw500 rem04 border_r10" @click="navigateTo('/pages/addUser/addUser')"
                style="background-color:#646B97;margin: 0 2vh 1rem 2.6rem;height: 9vh;">+添加待检人</view> -->
                <view class="allCenter fw500 rem04 border_r10" @click="show_pop"
                    style="background-color:#646B97;margin: 0 2vh 1rem 2.6rem;height: 9vh;">+添加待检人</view>
        </view>
        <view class="flex_column" style="flex:3">
            <page-head class="margin_top14"></page-head>
            <view class="flex_row margin_top14" style="justify-content: flex-end;">
                <image v-if="music" @click="music=false" src="../../image/dbbtn/opensound.png"
                    style="width: 8vh;height: 8vh;" class=" between_padding">
                </image>
                <image v-else @click="music=true" src="../../image/dbbtn/closeSound.png"
                    style="width: 8vh;height: 8vh;" class=" between_padding">
                </image>
                <image src="../../image/dbbtn/backhome.png" @click="backHome" style="width: 8vh;height: 8vh;"
                    class=" between_padding">
                </image>
                <image @click="navigateTo('/pages/logout/logout')" src="../../image/dbbtn/quit.png"
                    style="width: 8vh;height: 8vh;" class=" between_padding">
                </image>
                <image @click="navigateTo('/pages/set/set')" src="/static/img/canshu.da7d37c2.png"
                    style="width: 8vh;height: 8vh;" class=" between_padding">
                </image>
                </image>
            </view>
            <view class="rem03 flex_column" style="color: #7F839C;padding: 0 4vh 0 4vh;height: 100%;">
                <view v-if="!finish" style="padding: 5vh 0 5vh 0;">进行中 </view>
                <view v-if="!finish" class="flex_row_between border_r10"
                    style="padding: 10px 14px 10px 0px;background-color: #2A2F4B;height:15vh;">
                    <view class="flex_row">
                        <view style="width: 0.4rem;"></view>
                        <view class="flex_column margin_left10">
                            <view class="rem04" style="color: #FFF;">方淑彤</view>
                            <view class="flex_row" style="padding: 10px 2px;">
                                <view>女</view>
                                <view class="margin_left14">23岁</view>
                            </view>
                        </view>
                    </view>
                    <view class="flex_row alignCenter" style="height: 100%;" @click="tobfsp">
                        <view style="color: #FFF;" class="rem04">女性全检</view>
                        <image src="../../image/dbbtn/zbcj.png" style="width: 8vh;height: 8vh;margin-left: 20px;">
                        </image>
                    </view>
                </view>
                <view v-if="!finish" style="padding: 1rem 0 5vh 0;">全部待检 12个 </view>
                <view v-if="finish" style="padding: 1rem 0 5vh 0;">全部已检 12个 </view>
                <scroll-view style="height: 100%;overflow: hidden;" :scroll-y="true">
                    <view v-if="!finish" v-for="(item,index) in 10" class="flex_row_between border5"
                        style="padding: 15px 6px 15px 6px;margin-right: 14px;">
                        <view class="flex_row">
                            <view class="rem04">{{index}}.</view>
                            <view class="flex_column margin_left10">
                                <view class="flex_row alignCenter">
                                    <view class="rem04" style="color: #FFF;margin-left:1vh;">方淑彤</view>
                                    <view class="allCenter border_r5 margin_left10"
                                        style="color: #FFF;background-color: #3d4364;padding: 0 0.1rem 0 0.1rem;">
                                        本地</view>
                                </view>
                                <view class="flex_row" style="padding-top: 10px;margin-left:1vh;">
                                    <view>女</view>
                                    <view class="margin_left14">23岁</view>
                                </view>
                            </view>
                        </view>
                        <view class="flex_row alignCenter" style="height: 100%;padding-top: 5px;" @click="tobfsp">
                            <view style="color: #FFF;" class="rem04">女性全检</view>
                            <image src="../../image/dbbtn/zbcj.png" style="width: 8vh;height: 8vh;margin-left: 20px;">
                            </image>
                        </view>
                    </view>
                    <view v-if="finish" v-for="(item,index) in 10" class="flex_row_between border5"
                        style="padding: 15px 6px 15px 6px;margin-right: 14px;">
                        <view class="flex_row">
                            <view class="rem04">{{index}}.</view>
                            <view class="flex_column margin_left10">
                                <view class="flex_row alignCenter">
                                    <view class="rem04" style="color: #FFF;margin-left:1vh;">方淑彤</view>
                                    <view class="allCenter border_r5 margin_left10"
                                        style="color: #FFF;background-color: #3d4364;padding: 0 0.1rem 0 0.1rem;">
                                        本地</view>
                                </view>
                                <view class="flex_row" style="padding-top: 10px;margin-left:1vh;">
                                    <view>女</view>
                                    <view class="margin_left14">23岁</view>
                                </view>
                            </view>
                        </view>
                        <view class="flex_row alignCenter" style="height: 100%;padding-top: 5px;">
                            <view style="color: #FFF;" class="rem04">女性全检</view>
                            <image v-if="index==1" src="../../image/cjymicon/wc.png"
                                style="width: 8vh;height: 8vh;margin-left: 20px;"></image>
                            <image v-else src="../../image/cjymicon/wwc.png"
                                style="width: 8vh;height: 8vh;margin-left: 20px;"></image>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
        <uni-popup ref="popup" style="width: 100%; height: 100%;background-color:rgba(60, 67, 106, 0.7);">
        	<view style="width: 90vw;" >
                <view style="text-align: center;" class="rem04 m-b-3">
                    请完善待检人信息
                </view>
                <view class="main-pop-con rem03" style="padding: 4vh 8vh;">
                    <view class="alignCenter m-b-4">
                        <view style="width: 12vh;">登记时间</view>2022-02-06 22:22:22
                    </view>
					<view class="alignCenter m-b-4">
					    <view style="width: 12vh;">基本信息</view>
						<view class="input-con m-r-4" style="width: 30vh;height: 8vh;">
							<input placeholder="请填写姓名" placeholder-style="color: #FFFFFF;opacity: 0.3;"
								class="rem04" />
						</view>
						<view class="input-con m-r-4 alignCenter" style="width: 30vh;height: 8vh;" @click="time_click">
							<input placeholder="出生日期" disabled placeholder-style="color: #FFFFFF;opacity: 0.3;"
								class="rem04" style="flex: 1;" />
								<!-- <view style="padding-right: 2vh;"> -->
									<image src="../../image/icon/rl.png" style="height: 4vh;" mode="heightFix"></image>
								<!-- </view> -->
							
						</view>
						<view @click="sex_click(0)" class="input-con m-r-2 allCenter" style="width: 5.5vh; position: relative;">
							女
                            <image v-if="sex==0" src="../../image/sex-checked.png" style="position:absolute;left:0;top: 0;width: 100%;height: 100%;"></image>
						</view>
						<view @click="sex_click(1)" class="input-con allCenter" style="width: 5.5vh; position: relative;">
							男
                            <image v-if="sex==1" src="../../image/sex-checked.png" style="position:absolute;left:0;top: 0;width: 100%;height: 100%;"></image>
						</view>
					</view>
					<view class="alignCenter m-b-4">
					    <view style="width: 12vh;">手机号码</view>
						<view class="input-con m-r-4" style="width: 30vh;height: 8vh;">
							<input placeholder="手机号码" placeholder-style="color: #FFFFFF;opacity: 0.3;"
								class="rem04" />
						</view>
						
						
					</view>
					<view class="alignCenter  m-b-6">
					    <view style="width: 12vh;">服务项目</view>
						<view class="alignCenter">
							<view @click="check_click('head')" class="alignCenter m-r-3">
								<image v-if="checked.head" src="../../image/icon/checked.png" style="height: 4vh;width: 4vh;" ></image>
                                <view v-else style="width: 3.8vh;height: 3.8vh;background: #646B97;border-radius: 1vh;"></view>
                                <view class="m-l-1"></view>头面检查
							</view>
                            <view @click="check_click('all')" class="alignCenter m-r-3">
                            	<image  v-if="checked.all" src="../../image/icon/checked.png" style="height: 4vh;width: 4vh;"></image>
                                <view v-else style="width: 3.8vh;height: 3.8vh;background: #646B97;border-radius: 1vh;"></view>
                                <view class="m-l-1"></view>全身检查
                            </view>
                            <view @click="check_click('face')" class="alignCenter m-r-3">
                            	<image v-if="checked.face" src="../../image/icon/checked.png" style="height: 4vh;width: 4vh;" ></image>
                                <view v-else style="width: 3.8vh;height: 3.8vh;background: #646B97;border-radius: 1vh;"></view>
                                <view class="m-l-1">面部检查</view>
                            </view>
                            <view @click="check_click('girl')" class="alignCenter m-r-3">
                            	<image v-if="checked.girl" src="../../image/icon/checked.png" style="height: 4vh;width: 4vh;" ></image>
                                <view v-else style="width: 3.8vh;height: 3.8vh;background: #646B97;border-radius: 1vh;"></view>
                                <view class="m-l-1">女性检查</view>
                            </view>
                            <view @click="check_click('man')" class="alignCenter m-r-3">
                            	<image v-if="checked.man" src="../../image/icon/checked.png" style="height: 4vh;width: 4vh;" ></image>
                                <view v-else style="width: 3.8vh;height: 3.8vh;background: #646B97;border-radius: 1vh;"></view>
                                <view class="m-l-1">男性检查</view>
                            </view>
						</view>
						
						
					</view>
                    <view class="allCenter">
                        
                        <view style="padding: 0 3vh;">
                            <button style="background: #646B97;border-radius: 1.5vh;width: 24vh;" type="primary" @click="submit_click">
                            	<view style="padding: 0.5vh;">取消</view>   
                            </button>
                        </view>
                        <view style="padding: 0 3vh;">
                            <button style="background: #44CE7B;border-radius: 1.5vh;width: 24vh;" @click="submit_click">
                            	<view style="padding: 0.5vh;">确定</view>
                            </button>
                        </view>
                    </view>
                </view>
            </view>
        </uni-popup>
        <!--右侧弹窗-->
        <uni-popup ref="rightPop" type="right" backgroundColor="#4A5079">
            <view class="rem04" style="padding: 2vh 3vh;">
                <view class="m-b-4" style="text-align: right;">
                    <image src="../../image/close.png" style="width:8vh ;" mode="widthFix" @click="close_right"></image>
                </view>
                <view style="text-align: center;">
                    结束时间
                </view>
                <view class="allCenter m-b-4" style="padding: 3vh;">
                    <picker-view  :indicator-style="indicatorStyle" :mask-style="maskStyle" :value="value" @change="bindChange" 
					mask-style=" background: #00000000 !important;" mask-class="none">
                        <picker-view-column >
                            <view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
                        </picker-view-column>
                        <picker-view-column>
                            <view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
                        </picker-view-column>
                        <picker-view-column>
                            <view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
                        </picker-view-column>
                    </picker-view>
                </view>
                <view class="allCenter" >
					<button style="background: #44CE7B;border-radius: 1.5vh;width: 25vh;" @click="submit_click">
						<view style="padding: 0.5vh;">确定</view>
					</button>
				</view>
            </view>
            
        </uni-popup>
    </view>
</template>

<script>
    export default {
        data() {
            const date = new Date()
            const years = []
            const year = date.getFullYear()
            const months = []
            const month = date.getMonth() + 1
            const days = []
            const day = date.getDate()
            
            for (let i = 1990; i <= date.getFullYear(); i++) {
                years.push(i)
            }
            
            for (let i = 1; i <= 12; i++) {
                months.push(i)
            }
            
            for (let i = 1; i <= 31; i++) {
                days.push(i)
            }
            return {
                years,
                year,
                months,
                month,
                days,
                day,
                value: [9999, month - 1, day - 1],
                indicatorStyle: `height: 50px;`,
                
                maskStyle: "padding:10px 0",
                
                finish: false,
                music: false,
                
                sex:0,
                checked:{
                    head:false,
                    all:false,
                    face:false,
                    girl:false,
                    man:false
                }
            }
        },
        methods: {
            show_pop(){
                 this.$refs.popup.open()
            },
            close_right(){
                this.$refs.rightPop.close()
            },
            submit_click(){
                  this.$refs.rightPop.close()
                    this.$refs.popup.close()
            },
            bindChange (e) {
                const val = e.detail.value
                this.year = this.years[val[0]]
                this.month = this.months[val[1]]
                this.day = this.days[val[2]]
            },
            sex_click(sex){
                this.sex=sex
            },
            check_click(key){
                this.checked[key]=!this.checked[key];
            },
            navigateTo(url) {
                uni.navigateTo({
                    url: url
                })
            },
            
            back() {
                uni.navigateBack({
                    delta: 1,
                })
            },

            tobfsp() {
                uni.navigateTo({
                    url: '/pages/bfsp/bfsp'
                })
            },
            backHome() {
                uni.reLaunch({
                    url: '/pages/home/home',
                })
            },
            time_click(){
                this.$refs.rightPop.open()
            }
        }
    }
</script>
<!-- <style >
    .uni-picker-view-mask {
        top: 0;
        height: 100%;
        margin: 0 auto;
        background: -webkit-linear-gradient(top,hsla(0,0%,100%,.95),hsla(0,0%,100%,.6)),-webkit-linear-gradient(bottom,hsla(0,0%,100%,.95),hsla(0,0%,100%,.6));
        background: linear-gradient(180deg,hsla(0,0%,100%,.95),hsla(0,0%,100%,.6)),linear-gradient(0deg,hsla(0,0%,100%,.95),hsla(0,0%,100%,.6));
        background-position: top,bottom;
        background-size: 100% 102px;
        background-repeat: no-repeat;
    }
</style> -->
<style scoped>
    page {
        background: #1E2238 ;
       
    }
   
picker-view {
        width: 40vh;
        height: 40vh;
        margin-top:20rpx;
    }

    .item {
        line-height: 100rpx;
        text-align: center;
    }
    .btn {
        background: #1E2238;
        height: 9vh;
        border-radius: 10px 0px 0px 10px;
    }

    .inbtn {
        background: #4A5079;
        width: 30vh;
        height: 8vh;
    }


    .outbtn {
        background: #4A5079;  
        flex: 1;
    }
	
	.m-b-4{
		margin-bottom: 4vh;
	}
	.m-b-6{
		margin-bottom: 6vh;
	}
    .m-l-2{
    	margin-left: 2vh;
    }
    .m-l-1{
    	margin-left: 1vh;
    }
	.m-r-2{
		margin-right: 2vh;
	}
	.m-r-3{
		margin-right: 3vh;
	}
	.m-r-4{
		margin-right: 4vh;
	}
	.input-con {
		background: #646B97;
		border-radius: 2vh;
		height: 8vh;
		display: flex;
		align-items: center;
		padding:0 2vh;
	}
</style>
